<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-descriptions title="企业信息">
      <el-descriptions-item label="">
        <div class="avatar" style="margin-top: -30px">
          <el-avatar :src="formData.avatarPath" />
          <span class="avatar-span">{{ formData.enterpriseName }}</span>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="职位基础信息" :column="2">
      <el-descriptions-item label="职位名称"
        ><b>{{ formData.jobName }}</b></el-descriptions-item
      >
      <el-descriptions-item label="工作城市">
        <el-tag size="small">{{ formData.jobCity }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="学历要求">
        <b v-if="formData.jobRequireEdu == 1"> 专科及以上</b>
        <b v-else-if="formData.jobRequireEdu == 2"> 本科及以上</b>
        <b v-else-if="formData.jobRequireEdu == 3"> 研究生及以上</b>
        <b v-else> 不限</b>
      </el-descriptions-item>
      <el-descriptions-item label="薪资">
        <el-tag size="small" type="warning" v-if="formData.salaryMeet == 1">面议</el-tag>
        <span v-else>
          <el-tag type="warning" v-if="formData.salaryRangeFrom"
            >{{ formData.salaryRangeFrom }}K</el-tag
          >
          <el-tag type="warning" v-else-if="formData.salaryRangeTo"
            >至{{ formData.salaryRangeTo }}K</el-tag
          >
          <el-tag type="warning" v-else-if="formData.salaryMonth"
            >*{{ formData.salaryMonth }}薪</el-tag
          >
        </span>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="岗位职责">
      <el-descriptions-item label=""
        ><p style="white-space: pre-line; margin-top: -20px">{{
          formData.jobDuty
        }}</p></el-descriptions-item
      >
    </el-descriptions>
    <el-descriptions title="岗位要求">
      <el-descriptions-item label=""
        ><p style="white-space: pre-line; margin-top: -20px">{{
          formData.jobAsk
        }}</p></el-descriptions-item
      >
    </el-descriptions>

    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">投递简历</el-button>
      <el-button @click="collectJob" type="primary" :disabled="formData.collectionStatus">收藏</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { JobInfoApi, JobInfoVO } from '@/api/dbit/jobinfo'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { JobResumeInfoApi, JobResumeInfoVO } from '@/api/dbit/jobresumeinfo'

/** 企业职位信息 表单 */
defineOptions({ name: 'JobInfoForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  jobId: undefined,
  jobName: undefined,
  jobType: undefined,
  salaryRangeFrom: undefined,
  salaryRangeTo: undefined,
  jobCity: undefined,
  jobDuty: undefined,
  jobAsk: undefined,
  salaryMonth: undefined,
  salaryMeet: undefined,
  jobRequireEdu: undefined,
  jobEndDay: undefined,
  avatarPath: undefined,
  enterpriseName: undefined,
  collectionStatus:undefined,
})

const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await JobInfoApi.getJobInfo(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  // await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as JobInfoVO
    // console.log(data);
    const jId = data.jobId
    console.log(jId)
    const res = await JobResumeInfoApi.createJobResumeInfo(jId)
    if (res == null) {
      message.error('您还没有上传简历')
    } else {
      message.success('投递成功')
    }

    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

const collectJob = async () => {
  // 校验表单
  // await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as JobInfoVO
    // console.log(data);
    const jId = data.jobId
    console.log(jId)
    await JobInfoApi.createJobCollectionInfo(jId)
    message.success('收藏成功')

    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    jobId: undefined,
    jobName: undefined,
    jobType: undefined,
    salaryRangeFrom: undefined,
    salaryRangeTo: undefined,
    jobCity: undefined,
    jobDuty: undefined,
    jobAsk: undefined,
    salaryMonth: undefined,
    salaryMeet: undefined,
    jobRequireEdu: undefined,
    jobEndDay: undefined,
    avatarPath: undefined,
    enterpriseName: undefined
  }
  formRef.value?.resetFields()
}
</script>
<style lang="css">
.salary {
  color: #f77b72;
  /* float: right; */
  font-size: 15px;
}
.avatar {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  margin-top: 30px;
}
.avatar-span {
  margin-left: 60px;
}
</style>
